<template>
  <div
    v-if="logData.length"
    class="optionLog-component"
  >
    <item-title title="历史版本" />
    <el-table
      :data="logData"
      :cell-style="tableCellStyle"
      @row-click="tableRowClick"
      border
      size="medium"
      style="width: 100%"
    >
      <el-table-column
        prop="version"
        label="版本号"
        width="180"
      />
      <el-table-column
        prop="quality_standard_name"
        label="名称"
        width="300"
      />
      <el-table-column
        label="类型"
        align="center"
        prop="quality_type_name"
      />
      <el-table-column
        label="检验依据来源"
        align="center"
        prop="quality_source_name"
      />
      <el-table-column
        label="项目名称"
        align="center"
        prop="project_name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建人"
        align="center"
        prop="creator_name"
        width="120"
      />
      <el-table-column
        label="创建时间"
        align="center"
        prop="created_at"
        width="160"
      />
    </el-table>
  </div>
</template>

<script>
import { historyQuality } from '@/api/qualitySource'
export default {
  props: {
    projectId: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      logData: [],
      queryData: {
        id: this.projectId
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getLogList(this.queryData)
  },
  methods: {
    getLogList(data) {
      historyQuality(data).then((res) => {
        if (res.code === 200) {
          this.logData = res.data || []
        }
      })
    },
    afreshLogList() {
      this.getLogList(this.queryData)
    },
    tableRowClick(row, column, event) {
      this.$router.push({
        name: 'qualityDetail',
        query: {
          qualityId: row.id,
          isHistory: 1
        }
      })
    },
    tableCellStyle(row) {
      if (row.column.label === '操作') {
        return
      } else {
        return 'cursor: pointer'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.optionLog-component {
  margin-bottom: 20px;
}
</style>
